*{
	margin: 0;
	padding: 0;
}

body{
	width: 100%;
	height: auto;
}
#box{
	width: 100%;
	height: 100%;
	background-color: #ffffff;
   /* display: flex;
justify-content: space-around; */
position: relative;


}

#left{
width: 50%;
height: 30%;

background-color: red/* rgba(255,255,255,0.9) */;

}
#left_1{
/* width: 80%;
height: 80%; */
background-color: #000000;	
}
#left img{
	margin:30px 30px ;
}
#left_2{
	width: 80%;
	
	/* line-height: 20%; */
	background-color:white ;
	
}
#left_2 img{
	margin-left: 50%;
}
#right{
	width: 50%;
	height: 50%;
	margin-top: 2%;
	background-color: #0055ff;
	position: absolute;
	left: 50%;
	top: 3%;
	
}
.p3,.p4{
	text-align: center;
}
.p5{
	margin-left: 20%;
}
#footer{
	width: 100%;
	height: 20%;
	text-align: center;
	font-size: 1em;
	line-height: 50px;
	background-color: #000000;
	color: #F7F7F7;}
	
	@media  (max-width:767px){
		
	}
@media  (max-width:767px) 
{#left{width: 100%;height: auto; margin: 0 auto;
background-color: aqua;
display: flex;
	align-items: center;}



#right{
	width: 100%; height: auto;}

}		
	
/* @media  sscreen and  (min-height:1200px) 
		{#left{width: 100%;height: auto; }
			#right{width: 100%;height: auto;}
			#footer{
				width: 100%;height: auto;
			}
		}
	 */
/* @media (max-width:1200px) 
		{#left{width: 100%;height: auto; display: inline-block; }
			#right{width: 100%;height: auto;}
			#footer{
				width: 100%;height: auto;
			}
		}
		 
@media  (max-width:767px) 
		{
		body{
			background-color: yellow;
		}	
			{#left{width: 50%;height: 50%; 
			
		

		}
		 	#right{width: 100%;height: auto;
		
		}
		#footer{
			width: 100%;height: auto;
		}
		 } */